import { useEffect, useState } from "react"
import axios from 'axios'
function InputTitle() {
  const [title, setTitle] = useState('')
  useEffect(() => {
    document.title = title
  })
  return (
    <div>
      <h2>InputTitle: {title}</h2>
      <input type='text'
        onChange={(e) => setTitle(e.target.value)}/>
    </div>
  )
}

function ProtectContent({content, password}) {
  const [value, setValue] = useState('')
  const [valid, setValid] = useState(false)
  useEffect(() => {
    setValid(value === password)
  }, [value, password])
  return (
    <div>
      <h2>ProtectContent</h2>
      <div>{valid ? content : "秘密"}</div>
      <input type='password'
        onChange={e => setValue(e.target.value)}
      />
    </div>
  )
}
function ClickInfo() {
  const [info, setInfo] = useState({})
  const fn = e => {
    setInfo({x: e.x, y: e.y, tag: e.target.tagName})
  }
  useEffect(() => {
    window.addEventListener('click', fn)
    return () => window.removeEventListener('click', fn)
  }, [])
  const {x, y, tag} = info
  return (<h2>ClickInfo: (x={x},y={y},tag={tag}) </h2>)
}

function AjaxList() {
  const [list, setList] = useState([])
  useEffect(() => {
    axios.get('https://619c89ce68ebaa001753c8ff.mockapi.io/students')
      .then(resp => {
        setList(resp.data)
      })
  }, [])
  return <ul>{list.map(item =>
      <li key={item.id}>
        <img src={item.avatar} alt=''/>{item.name}
      </li>
    )}</ul>
}

export default function Homework1123() {
  return <div>
    <InputTitle />
    <ProtectContent
      content="今晚打老虎"
      password="1234"/>
    <ClickInfo />
    <AjaxList />
  </div>
}